<template>
  <a-button @click="handleDraw">开始坡度坡面分析</a-button>
  <div id="cesiumContainer"></div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
import CesiumTool from '@/utils/newCesiumTool/CesiumTool.js'
import drawSlopePolygon from '@/utils/newCesiumTool/Common/drawSlopePolygon'
import { reactive } from "vue";

const cesiumObj = {
  viewer: null,
  cesiumDraw: null
}
let terrainProviderLoad = false ;// 地图信息是否加载
onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    animation: false, // 左下角的动画控制器组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: true, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, //是否显示选取指示器组件
    timeline: false, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  });
  cesiumObj.viewer = viewer
  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = "none";
  // 资产地形
  // 启用 FPS 显示
  viewer.scene.debugShowFramesPerSecond = true;
  cesiumObj.cesiumDraw = new CesiumTool.CesiumDraw(viewer) // 绘制类

  // 加载地形
  const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1);
  viewer.terrainProvider = terrainProvider; // 使用地形

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(100, 31, 15000.0),
  });

  // 监听地形瓦片加载进度事件
  viewer.scene.globe.tileLoadProgressEvent.addEventListener((tilesLoading) => {
    if (tilesLoading === 0) {
      terrainProviderLoad = true
      console.log("地形加载完成");
      // 可以在这里执行其他操作，比如开启用户交互或显示加载完成提示
    } else {
      terrainProviderLoad = false
      console.log(`还有 ${tilesLoading} 个地形瓦片正在加载`);
    }
  });


  viewer.scene.fxaa = true; // 启用 FXAA

});

async function handleDraw() {
  if(!terrainProviderLoad) return console.error('地形数据还未加载,请加载后执行操作')
  const viewer = cesiumObj.viewer
  try {
    const res = await cesiumObj.cesiumDraw.drawPromise('Rectangle', false)
    console.log('绘制完成', res)
    const rectanglePositionList = res.rectanglePositionList // 矩形四个点的坐标
    // 四个顶点坐标，计算并绘制
    const primitives = await drawSlopePolygon(
      rectanglePositionList[0],
      rectanglePositionList[1],
      rectanglePositionList[2],
      rectanglePositionList[3],
      rectanglePositionList[4],
      rectanglePositionList[5],
      rectanglePositionList[6],
      rectanglePositionList[7],
      cesiumObj.viewer.terrainProvider,
    )
    viewer.scene.primitives.add(primitives)

    console.log('坡面坡度分析完成')
  } catch (e) {
    console.error(e)
  }

}

</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
